<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/public/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>快递查询</title>
<%@ include file="/WEB-INF/page/public/contentmeta.jsp"%>
<link rel="stylesheet" href="<%=basePath%>css/global.css" media="all" />
<link rel="stylesheet" href="<%=basePath%>plugins/font-awesome/css/font-awesome.min.css" media="all">
<link rel="stylesheet" href="<%=basePath%>css/system.css" media="all">
<link rel="stylesheet" href="<%=basePath%>css/tab.css" media="all" />

<style type="text/css">
	.layui-form-label i { color:red; padding-right: 3px;}
	
	.addbg{width:380px;background:#2591d0;color:#fff;cursor:default;}
	.first{border:1px solid #c9c9c9;width:300px;border-radius:2px;}
	#append{width:380px;height:auto;background:#ffffff;border:1px solid #c9c9c9;display:none;border-radius:2px;margin-top:10px;position:absolute;z-index:99999;}
	#append .item{width:380px;height:30px;line-height:30px;}
	
</style>

</head>
<body>
	<div class="admin-tab admin-user">
		<div class="tab-condition">
			<form class="layui-form clefix" id="zyform"
				action="/customer/expresslisturl" method="post">
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input type="text" name="keyWord" id="keyWord" autocomplete="off" placeholder="请输入关键字" class="layui-input" value="${pager.params.keyWord }">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block" style="width: 170px;">
						<select name="createuser" id="createuser" lay-filter="createuser" class="typeclass">
							<option value="">请选择寄件人</option>
							<option value="-1" <c:if test="${pager.params.createuser == -1}">selected</c:if>>全部 </option>
	                    	<c:forEach var="nameobj" items="${userlist}">
	                    		<option value="${nameobj.uid}" <c:if test="${ nameobj.uid == pager.params.createuser }">selected</c:if> >${nameobj.name}</option>
	                    	</c:forEach>
		                 
						</select>
					</div>
				</div>
			 
				<div class="layui-form-item">
					<input name="skipToPage" id="skipToPage" type="hidden" value="${pager.pageNo}"> 
					<input type="hidden" id="pageNo" name="pageNo" value="${pager.pageNo}"> 
					<input type="hidden" id="totalPage" name="totalPage" value="${pager.totalPages}">
					<button class="layui-btn TM-btn-search searchbtn" type="button">
						<i class="layui-icon layui-unselect layui-tab-close">&#xe615;</i>搜索
					</button>
					<button class="layui-btn refreshbtn" type="button">
						<i class="layui-icon layui-unselect layui-tab-close ">&#x1002;</i>刷新
					</button>
				</div>
			</form>
			<div class="TM-tab-info">
				<a class="layui-btn layui-btn-primary layui-btn-small  sqdbbtn"><i class="layui-icon">&#xe621;</i>添加快递信息</a> 
				<a class="layui-btn layui-btn-primary layui-btn-small  refreshbtn"><i class="layui-icon">&#x1002;</i>刷新</a>
			</div>
		</div>
		<div class="layui-field-box">
			<table class="site-table table-hover TM-table3">
				<thead>
					<tr>
						<th style="width: 8%;">寄件人</th>
						<th style="width: 10%;">单号</th>
						<th style="width: 8%;">收件人</th>
						<th style="width: 29%;">收件地点</th>
						<th style="width: 10%;">联系电话</th>
						<th style="width: 15%;">寄件内容</th>
						<th style="width: 10%;">创建时间</th>
						<th style="width: 10%;">操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="obj" items="${pager.resultList}" varStatus="o1">
						<tr>
							<td>${obj.createuserName}</td>
							<td>${obj.number}</td>
							<td>${obj.name}</td>
							<td>${obj.address}</td>
							<td>${obj.phone}</td>
							<td>${obj.remark}</td>
							<td>${obj.createdate.substring(0,10)}</td>
							<td>
								<a class="layui-btn layui-btn-normal layui-btn-mini ckbtn" data="${obj.number}">快递查询</a>
								<c:if test="${obj.updateuser==1}">
								<a class="layui-btn layui-btn-normal layui-btn-mini deletebtn" data="${obj.id}">删除</a>
								</c:if>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<div class="admin-table-page">
				<div id="page" class="page"></div>
			</div>
		</div>
	</div>
	
	<!-- 申请代办弹窗 -->
	<div id="TM-layui-hetong" style="display: none;">
		<div class="TM-he-tong admin-entering">
			<form class="layui-form TM-entering-form" action="" id="hetongform"
				novalidate="novalidate">
				<div class="">
					<div class="layui-form-item">
						<label class="layui-form-label"><i>*</i><span>快递单号 : </span></label>
						<div class="layui-input-block">
							<input type="text" name="number" id="number" 
						  autocomplete="off" class="layui-input" placeholder="请输入快递单号">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label"><i>*</i><span>收件人 : </span></label>
						<div class="layui-input-block htqyname">
							<input type="text" name="name" id="name" autocomplete="off" class="layui-input" placeholder="请输入收件人">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">
							<span>收件人电话 : </span>
						</label>
						<div class="layui-input-block">
							<input type="text" name="phone" id="phone" autocomplete="off" class="layui-input" placeholder="请输入收件人联系电话">
						</div>
					</div>
					
					<div class="layui-form-item">
						<label class="layui-form-label">
							<i>*</i><span>收件地址 : </span>
						</label>
						<div class="layui-input-block">
							<input type="text" name="address" id="address" autocomplete="off" class="layui-input" placeholder="请输入收件地址 ">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">
							<i>*</i><span>寄件人 : </span>
						</label>
						<div class="layui-input-block">
							<select name="createuser" >
		                    	<c:forEach var="nameobj" items="${userlist}">
		                    		<option value="${nameobj.uid}" <c:if test="${ nameobj.uid == uid }">selected</c:if> >${nameobj.name}</option>
		                    	</c:forEach>
		                    </select>
						</div>
					</div>
					 
					
				</div>
				 
				<div class="layui-form-item TM-hetong-jilu">
					<label class="layui-form-label"><i>*</i><span>寄件内容 :</span> </label>
					<div class="layui-input-block" id="others">
					    <input type="checkbox" name="remarks" value="资格证" title="资格证" lay-filter="filter" lay-skin="primary" fi> 
					    <input type="checkbox" name="remarks" value="注册证" title="注册证" lay-filter="filter" lay-skin="primary"> 
					    <input type="checkbox" name="remarks" value="注册章" title="注册章" lay-filter="filter" lay-skin="primary"> 
					    <input type="checkbox" name="remarks" value="注册材料" title="注册材料" lay-filter="filter" lay-skin="primary"> 
					     <input type="checkbox" name="remarks" value="B证" title="B证" lay-filter="filter" lay-skin="primary"> 
					      <input type="checkbox" name="remarks" value="照片" title="照片" lay-filter="filter" lay-skin="primary"> 
					    <input type="checkbox" name="remarks" value="合同" title="合同" lay-filter="filter" lay-skin="primary"> 
					     <input type="checkbox" name="remarks" value="身份证" title="身份证" lay-filter="filter" lay-skin="primary"> 
					      <input type="checkbox" name="remarks" value="毕业证" title="毕业证" lay-filter="filter" lay-skin="primary"> 
					       <input type="checkbox" name="remarks" value="其他" title="其他"    lay-filter="filter" lay-skin="primary"> 
					     <input type="text" name="otherremarks" id="otherremarks" value="" style="display:none;width:200px;" autocomplete="off" class="layui-input" placeholder="请输入寄件内容 "> 
						  <textarea placeholder="请输入寄件内容" name="remark" id="remark"  style="display:none" class="layui-textarea"></textarea> 
					</div>
					 
				</div>
			</form>
		</div>
	</div>
	 
	

	<script>
		layui.config({
			base : 'plugins/layui/modules/'
		});
		layui.use([ 'element', 'laypage',"laytpl", 'form', 'laydate', 'layer' ],function() {
			var $ = layui.jquery, 
				laypage = layui.laypage, 
				layer = layui.layer,
				laytpl = layui.laytpl,
				element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
			var form = layui.form();
			//用于标记是否正在提交合同
			var tjstate =0;
			
			//更新渲染  
		     form.render();
			
			//点击搜索
			$(".searchbtn").on("click",function(){
				$("#skipToPage").val(1);
				$("#zyform").submit();
			});
			var content = [],vother=0;
			form.on('checkbox(filter)', function(data){
				var size = $.inArray(data.value,content);
				if(size>-1){
					content.splice($.inArray(data.value,content),1);
				}
				
					if(data.value=="其他"){
						if(data.elem.checked){
							vother=1;
							$("#otherremarks").show();
						}else{
							vother=0;
							$("#otherremarks").val("");
							$("#otherremarks").hide();
							form.render();
						} 
					}else{
						if(data.elem.checked){
							content.push(data.value)
						}
						
					}  
				 // console.log(data.elem); //得到checkbox原始DOM对象
				  //console.log(data.elem.checked); //是否被选中，true或者false
				 // console.log(data.value); //复选框value值，也可以通过data.elem.value得到
				 // console.log(data.othis); //得到美化后的DOM对象
			});    
			
			$(".ckbtn").on("click",function(){
				var  number = $(this).attr("data");
				
				layer.open({
					type: 2
					,content: 'https://m.ickd.cn/result.html#com=auto&no='+number
					,btnAlign: 'c' //按钮居中
					,shadeClose:true
					,title:'快递查询 '
					,area:['40%','99%']
					,maxWidth:800
				});
				
			 
			});
			
			
			//点击删除
			$(".deletebtn").on("click",function(){
				var id = $(this).attr("data");
				layer.confirm('确定删除该记录吗？', {
					btn: ['确定删除','取消'] //按钮
					}, function(){
						$.ajax({
							type:"post",
							url : "/customer/deleteexpress",
							data : {id : id},
							dataType : "json",
							async : false,
							success : function(data){
								if (data == 1) {
									layer.msg("删除成功.",{time:500,icon:1},function(){
										window.location.reload();
									});
								} else {
									layer.msg("删除失败.",{time:500,icon:2},function(){
										window.location.reload();
									});
								}	
							}
						});
					}, function(){
				});
			});
			
			 
			
				
			//申请代办的表单
			$("#hetongform").validate({
				rules: {
					number : {
						required:true
					},
					otherremarks : {
						required:true
					},
					name : {
						required:true
					}, 
					address: {
						required:true
					},
					remark: {
						required:true
					} 
				},
				messages: {
					number : {
						required:"请输入快递单号"
					}, 
					otherremarks : {
						required:"请输入寄件内容"
					},
					name : {
						required:"请输入收件人"
					}, 
					address: {
						required:"请输入收件地址"
					},
					remark: {
						required:"请输入寄件内容"
					} 
				},
				errorPlacement: function(error, element) {
	 	    		 tjstate =0;
	 				layer.tips(error.text(), element, {
	 					tips: [2,tipColor],
	 	     		 tipsMore: true
	 	     		});
	 	   		},
				submitHandler: function(formobj){
					
					var otherremark= $("#otherremarks").val();
					if(vother<1&&content.length<1){
						layer.tips("请选择寄件内容", $("#others"), {
		 					tips: [3,tipColor],
		 	     		 tipsMore: true
		 	     		});
						return false; 
					}
					$("#remark").val(content.join(",")+" "+otherremark);
					tjstate =1;
					var values = $("#hetongform").serialize();
					$.ajax({
						type : "post",
         		 		url : "/customer/saveexpress",
         		 		data : values,
         		 		dataType : "json",
         		 		async : false,
         		 		success : function(data){
         		 			window.location.reload();
         		 		}
					});
				 
				}
			});
			
		 
			//点击申请代办
			$(".sqdbbtn").on("click", function() {
				
				layer.open({
					title:'添加快递信息',
					type:1, 
					content:$('#TM-layui-hetong'),
					btn: ['保存', '取消'],
					shadeClose:true,
					scrollbar:true,
					btnAlign:'c',
					area: ['60%','98%'],
					yes: function(){
						//这里是保存成草稿
						if(tjstate ==0){
							 $("#hetongform").submit(); 
						}else{
							layer.msg("正在提交申请,请勿重复提交",{icon: 0});
						}
						return false;
					} 
				});
			});
			
	 
	 
			
	 
			
		 
			
			//清除证书搜索条件
			$(document).on('click','.zscleanbtn',function(){
				$("#zskeyword").val("");
				$("#sestate").val(-1);
				//更新渲染  
			    form.render();
			});
			

			var pageNo = $("#pageNo").val();
			var totalPage = $("#totalPage").val();
			//page
			laypage({
				cont : 'page',
				curr : pageNo//'${pager.pageNo}'
				,
				pages : totalPage//'${pager.totalPages}' //总页数
				,
				groups : 5 //连续显示分页数
				,
				jump : function(obj, first) {
					//得到了当前页，用于向服务端请求对应数据
					var curr = obj.curr;
					if (!first) {
						$("#skipToPage").val(curr);
						$("#zyform").submit();
					}
				}
			});
			
		 
		
		});
		
		function getFocus(obj){
	  	    $(".item").removeClass("addbg");
	  	    $(obj).addClass("addbg");
	  	}
	  	function getCon(obj){
	  	    var value = $(obj).text();
	  	    $("#bank").val(value);
	  	    $("#append").hide().html("");
	  	}
	</script>
</body>
</html>